import React, { Component } from 'react'
import { Form, Input, Select } from 'antd';
import PropTypes from 'prop-types'


class AddUpdateForm extends Component {

    // 声明接收父组件传递的函数和字符串
    static propTypes = {
        setForm:PropTypes.func.isRequired,
        roles:PropTypes.array,
        user:PropTypes.object
    }

    UNSAFE_componentWillMount(){
        // 将表单数据传给父组件
        this.props.setForm(this.props.form)
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { Option } = Select;
        return (
            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} onSubmit={this.handleSubmit}>
                <Form.Item label="用户名">
                    {getFieldDecorator('username', {
                        initialValue:this.props.user.username,
                        rules: [{ required: true, message: '用户名为必填项' }],
                    })(<Input placeholder="请输入用户名" />)}
                </Form.Item>
                {
                    this.props.user._id ? null : (
                        <Form.Item label="密码">
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '密码为必填项' }],
                        })(<Input placeholder="请输入密码" />)}
                        </Form.Item>
                    )
                }
                <Form.Item label="手机号">
                    {getFieldDecorator('phone', {
                        initialValue:this.props.user.phone,
                        rules: [{ required: true, message: '手机号为必填项' }],
                    })(<Input placeholder="请输入手机号" type="number"/>)}
                </Form.Item>
                <Form.Item label="邮箱">
                    {getFieldDecorator('email', {
                        initialValue:this.props.user.email,
                        rules: [{ required: true, message: '邮箱为必填项' }],
                    })(<Input placeholder="请输入邮箱" />)}
                </Form.Item>
                <Form.Item label="角色">
                    {getFieldDecorator('role_id', {
                        initialValue:this.props.user.role_id,
                        rules: [{ required: true, message: '角色为必填项' }],
                    })(
                        <Select placeholder="请选择角色">
                            {
                                this.props.roles.map((item) => <Option value={item._id} key={item.create_time}>{item.name}</Option>)
                            }
                        </Select>
                    )}
                </Form.Item>
            </Form>
        )
    }
}

const AddUpdate = Form.create()(AddUpdateForm);
export default AddUpdate
